<template>
	<view class="online-service" v-if="customerShow">
		<view class="customer-box">
			<view @click="closeCustomer" class="box-close" style="background-image: url(https://cs.midea.com/c-css/front/wechat/miniprogram-midea-one/icon/close/icon-close-gray.png)"></view>
			<view class="customer-img-box">
				<image alt="服务小姐姐" class="customer-img" src="https://cs.midea.com/c-css/front/wechat/miniprogram-midea-one/logo-online-cs.png"></image>
			</view>
			<view class="customer-detail">
				<view class="detail-left">
					<view class="customer-title">在线客服</view>
					<view class="customer-time"> 工作时间：8:30～23:00 </view>
				</view>
				<view catch:tap="goOnlineService" class="customer-btn">前往咨询 </view>
			</view>
			<view class="hotline-list">
				<view class="item">24小时服务热线</view>
				<view class="item">
					<view class="box-key">美的</view>
					<view catch:tap="callService" class="box-value" data-phone="400-8899-315">400-8899-315</view>
				</view>
				<view class="item">
					<view class="box-key">小天鹅</view>
					<view catch:tap="callService" class="box-value" data-phone="400-8228-228">400-8228-228</view>
				</view>
				<view class="item">
					<view class="box-key">COLMO</view>
					<view catch:tap="callService" class="box-value" data-phone="400-969-9999">400-969-9999</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['customerShow'],
		data() {
			return {
				
			}
		},
		methods:{
			closeCustomer(){
				this.$emit('child-customer', false);
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss" scoped>
	.online-service {
	  align-items: center;
	  background: rgba(0, 0, 0, 0.5);
	  bottom: 0;
	  color: var(--text-main-color--);
	  display: -webkit-flex;
	  display: flex;
	  font-size: 14px;
	  justify-content: center;
	  left: 0;
	  position: fixed;
	  right: 0;
	  top: 0;
	  z-index: 10;
	}
	.customer-box {
	  background-color: #fff;
	  border-radius: 10px;
	  overflow: hidden;
	  position: relative;
	  text-align: center;
	  width: 330px;
	}
	.box-close {
	  background-position: 50%;
	  background-repeat: no-repeat;
	  background-size: 100%;
	  height: 18px;
	  position: absolute;
	  right: 20px;
	  top: 20px;
	  width: 18px;
	}
	.customer-img {
	  height: 110px;
	  margin: 0 auto 2px;
	  width: 262px;
	}
	.small-box .customer-box {
	  width: 300px;
	}
	.customer-img-box {
	  height: 140px;
	  margin: 0 auto;
	  width: 140px;
	}
	.customer-img {
	  height: 100%;
	  width: 100%;
	}
	.customer-detail {
	  align-items: center;
	  display: -webkit-flex;
	  display: flex;
	  justify-content: space-between;
	  padding: 20px 24px 16px;
	}
	.detail-left {
	  text-align: left;
	}
	.customer-title {
	  color: var(--text-main-color--);
	  font-size: 16px;
	  letter-spacing: 0;
	  line-height: 24px;
	}
	.customer-time {
	  color: var(--text-normal-color--);
	  font-size: 14px;
	  letter-spacing: 0;
	  line-height: 20px;
	  margin-top: 5px;
	}
	.customer-btn {
	  background: var(--brand-main-color--);
	  border-radius: 16px;
	  color: #fff;
	  font-size: 12px;
	  height: 32px;
	  line-height: 32px;
	  margin-right: 0;
	  padding: 0 12px;
	}
	.disabled-background {
	  background: #ccc !important;
	  color: #fff !important;
	}
	.hotline-list {
	  background: #f5f7fa;
	  color: var(--text-main-color--);
	  font-size: 12px;
	  letter-spacing: 0;
	  line-height: 24px;
	  padding: 10px 24px;
	}
	.item {
	  align-items: center;
	  display: -webkit-flex;
	  display: flex;
	  justify-content: space-between;
	  line-height: 18px;
	  padding: 6px 0;
	}
	.box-value {
	  color: var(--brand-main-color--);
	}
	.customer-tips {
	  color: var(--text-main-color--);
	  font-family: PingFang-SC-Regular, sans-serif;
	  font-size: 16px;
	  letter-spacing: 0;
	  line-height: 24px;
	  margin: 15px auto 0;
	  text-align: center;
	  width: 242px;
	}

</style>